<template>
    <a-layout style="min-height: 100vh">
        <a-layout :style="{
            backgroundImage: 'url(' + backGroundImg + ')',
            backgroundRepeat: 'no-repeat', backgroundSize: '1600px 460px'
        }" style="background-color: #fff;">

            <a-layout-header style="background: transparent; padding: 0; margin-bottom: 20px;">
                <div style="display: flex;">
                    <div>
                        <img src="@/assets/logo-no-background.png" style="height: 60px;" @click="$router.push('/homepage_demo' + '?randomId=' + Math.random())" />
                    </div>
                    <div v-if="!login" style="margin-left: auto; margin-right: 10px; margin-top: 5px">
                        <a-button style="background: transparent; color: white" @click="onLoginShow">
                            <template #icon><user-outlined style="color: white"/></template>
                            登录
                        </a-button>
                    </div>
                    <div v-else style="margin-left: auto; margin-right: 10px; margin-top: 5px">
                        <a-dropdown>
                            <a-button style="background: transparent; color: white">
                                <user-outlined style="color: white"/>
                                {{ $store.state.username }}
                                <DownOutlined />
                            </a-button>
                            <template #overlay>
                                <a-menu @click="onMenuClick">
                                    <a-menu-item key="center">
                                        <span style="display: flex; justify-content: center;">个人中心</span>
                                    </a-menu-item>
                                    <a-menu-divider />
                                    <a-menu-item key="favorite">
                                        <span style="display: flex; justify-content: center;">我的收藏</span>
                                    </a-menu-item>
                                    <a-menu-item key="interest">
                                        <span style="display: flex; justify-content: center;">我的关注</span>
                                    </a-menu-item>
                                    <a-menu-divider />
                                    <a-menu-item key="logout">
                                        <span style="display: flex; justify-content: center;">退出登录</span>
                                    </a-menu-item>
                                </a-menu>
                            </template>
                        </a-dropdown>
                    </div>
                </div>
                <hr class="custom-divider" />
            </a-layout-header>
            <a-layout-content>
                <div id="tab-header">
                    <div id="tab-header-text">
                        高级检索
                    </div>
                </div>
                <div style="margin-left: 300px; display: flex; justify-content: space-between; align-items: center; width: 1000px">
                    <div id="tab-content">
                        <a-input-group compact style="margin-left: 105px;">
                            <a-select v-model:value="searchField1" defaultValue="title" style="margin-top: 20px; width: 120px">
                                <a-select-option value="title">题名</a-select-option>
                                <a-select-option value="author">作者</a-select-option>
                                <a-select-option value="abstract">摘要</a-select-option>
                                <a-select-option value="journal">期刊</a-select-option>
                            </a-select>
                            <a-input v-model:value="searchQuery1" placeholder="请输入检索词" style="width: 400px; margin-top: 20px;" />
                        </a-input-group>
                        <a-input-group compact style="margin-left: 25px;">
                            <a-select v-model:value="searchOperator2" defaultValue="and" style="margin-top: 5px; width: 80px">
                                <a-select-option value="and">与</a-select-option>
                                <a-select-option value="or">或</a-select-option>
                                <a-select-option value="not">非</a-select-option>
                            </a-select>
                            <a-select v-model:value="searchField2" defaultValue="author" style="margin-top: 5px; width: 120px">
                                <a-select-option value="title">题名</a-select-option>
                                <a-select-option value="author">作者</a-select-option>
                                <a-select-option value="abstract">摘要</a-select-option>
                                <a-select-option value="journal">期刊</a-select-option>
                            </a-select>
                            <a-input v-model:value="searchQuery2" placeholder="请输入检索词" style="width: 400px; margin-top: 5px;" />
                        </a-input-group>
                        <a-input-group compact style="margin-left: 25px;">
                            <a-select v-model:value="searchOperator3" defaultValue="and" style="margin-top: 5px; width: 80px">
                                <a-select-option value="and">与</a-select-option>
                                <a-select-option value="or">或</a-select-option>
                                <a-select-option value="not">非</a-select-option>
                            </a-select>
                            <a-select v-model:value="searchField3" defaultValue="abstract" style="margin-top: 5px; width: 120px">
                                <a-select-option value="title">题名</a-select-option>
                                <a-select-option value="author">作者</a-select-option>
                                <a-select-option value="abstract">摘要</a-select-option>
                                <a-select-option value="journal">期刊</a-select-option>
                            </a-select>
                            <a-input v-model:value="searchQuery3" placeholder="请输入检索词" style="width: 400px; margin-top: 5px;" />
                        </a-input-group>
                        <a-input-group compact style="margin-left: 25px;">
                            <a-select v-model:value="searchOperator4" defaultValue="and" style="margin-top: 5px; width: 80px">
                                <a-select-option value="and">与</a-select-option>
                                <a-select-option value="or">或</a-select-option>
                                <a-select-option value="not">非</a-select-option>
                            </a-select>
                            <a-select v-model:value="searchField4" defaultValue="journal" style="margin-top: 5px; width: 120px">
                                <a-select-option value="title">题名</a-select-option>
                                <a-select-option value="author">作者</a-select-option>
                                <a-select-option value="abstract">摘要</a-select-option>
                                <a-select-option value="journal">期刊</a-select-option>
                            </a-select>
                            <a-input v-model:value="searchQuery4" placeholder="请输入检索词" style="width: 400px; margin-top: 5px;" />
                        </a-input-group>
                        <div style="position: relative; margin-top: 10px; margin-left: 25px">
                            <a-typography-text strong style="font-size: 16px">时间限定:</a-typography-text>
                            <!-- ant-design 4 -->
                            <!--                    <a-range-picker :presets="rangePresets" @change="onRangeChange" />-->
                            <a-range-picker style="position: absolute; left: 80px" v-model:value="time" :ranges="ranges"/>
                        </div>
                        <div style="position: relative; margin-top: 10px; margin-left: 25px">
                            <a-typography-text strong style="font-size: 16px">学科限定:</a-typography-text>
                            <a-cascader
                                    style="position: absolute; left: 80px"
                                    v-model:value="subjects"
                                    multiple
                                    max-tag-count="responsive"
                                    :options="subjectOptions"
                                    placeholder="选择学科"
                            ></a-cascader>
                        </div>
                        <hr class="custom-divider" style="margin-top: 20px"/>
                        <a-button type="primary" size="large" style="margin-left: 175px; width: 150px" @click="onAdvancedSearch">
                            <template #icon><SearchOutlined /></template>
                            检索
                        </a-button>
                        <a-button size="large" style="margin-left: 50px; width: 100px" @click="onClear">
                            清空
                        </a-button>
                    </div>
                    <div id="tab-description">
                        <div style="overflow-y:auto; height: 100%; margin-left: 10px;">
                            <div style=" margin-top: 10px; line-height: 2;">
                                <span style="font-size: 18px">高级检索使用方法：</span>
                                <hr class="custom-divider" style="margin-right: 10px"/>
                                <span style="color: #9A9A9A;">高级检索支持使用运算符*、+、-、''、""、()进行同一检索项内多个检索词的组合运算，检索框内输入的内容不得超过120个字符。输入运算符*(与)、+(或)、-(非)时，前后要空一个字节，优先级需用英文半角括号确定。若检索词本身含空格或*、+、-、()、/、%、=等特殊符号，进行多词组合运算时，为避免歧义，须将检索词用英文半角单引号或英文半角双引号引起来。</span>
                                <br/>
                                <span style="font-size: 18px">例如：</span>
                                <br/>
                                <span style="color: #9A9A9A;">（1）篇名检索项后输入：神经网络 * 自然语言，可以检索到篇名包含“神经网络”及“自然语言”的文献。</span>
                                <br/>
                                <span style="color: #9A9A9A;">（2）主题检索项后输入：(锻造 + 自由锻) * 裂纹，可以检索到主题为“锻造”或“自由锻”，且有关“裂纹”的文献。</span>
                                <br/>
                                <span style="color: #9A9A9A;">（3）如果需检索篇名包含“digital library”和“information service”的文献，在篇名检索项后输入：'digital library' * 'information service'。</span>
                                <br/>
                                <span style="color: #9A9A9A;">（4）如果需检索篇名包含“2+3”和“人才培养”的文献，在篇名检索项后输入：'2+3' * 人才培养。</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div style="margin-left: 300px; margin-top: 20px;">
                    <div style="display: flex; justify-content: space-between; align-items: center; width: 1000px">
                        共找到 {{total}} 篇文章
                        <a-pagination v-model:current="currentPage" v-model:pageSize="pageSize" size="small"
                                      :total="total" show-size-changer show-quick-jumper @change="onPageChange" @showSizeChange="onShowSizeChange"/>
                    </div>
                    <div style="display: flex; justify-content: space-between; align-items: center; width: 1000px">
                        <div>
                            排序:
                            <a-button size="small" style="background-color: #4F4F4F; color: white">
                                <template #icon>
                                    <unordered-list-outlined :style="{color: 'white'}"/>
                                </template>
                                时效性
                            </a-button>
                            <a-button size="small" style="margin-left: 5px; background-color: white; color: #4F4F4F">
                                <template #icon>
                                    <unordered-list-outlined :style="{color: '#4F4F4F'}"/>
                                </template>
                                兴趣度
                            </a-button>
                        </div>
                        <div style="margin-top: 10px">
                            显示方式:
                            <a-button size="small" :class="paperShow === 'card' ? 'active' : 'inactive' " @click="onPaperShow">
                                <template #icon>
                                    <appstore-outlined :style="paperShow === 'card' ? 'color: white' : 'color: #4F4F4F'"/>
                                </template>
                                详细
                            </a-button>
                            <a-button size="small" style="margin-left: 5px;" :class="paperShow === 'list' ? 'active' : 'inactive' " @click="onPaperShow">
                                <template #icon>
                                    <menu-outlined :style="paperShow === 'list' ? 'color: white' : 'color: #4F4F4F'"/>
                                </template>
                                列表
                            </a-button>
                        </div>
                    </div>
                    <div v-if="paperShow==='card'" style="width: 1000px">
                        <a-list style="min-height: 350px;" :loading="loading" item-layout="vertical" size="large"
                                :data-source="data" :split="false">
                            <template #renderItem="{ item }">
                                <a-list-item>
                                    <a-card :loading="item.loading" style="border-width: 2px;">
                                        <p :style="{ color: item.isTitleHovered ? '#5C7DFF' : '#1151D9', textDecoration: item.isTitleHovered ? 'underline' : 'none' , fontSize: '20px', cursor: 'pointer'}"
                                           @mouseover="item.isTitleHovered = true"
                                           @mouseleave="item.isTitleHovered = false"
                                           @click="handleRead(item.paper_id)">
                                            {{item.title}}
                                        </p>
                                        <p style="color: #6C6C6C">
                                            <!-- 作者列表，可跳转至作者界面 -->
                                            作者:
                                            <template v-for=" (author, index) in item.authors"
                                                      :key="author.author_id">
                                                <u :style="{ color: author.isHovered ? '#6C6C6C' : '#0B0E47', textDecoration: author.isHovered ? 'underline' : 'none', cursor: 'pointer' }"
                                                   @mouseover="author.isHovered = true"
                                                   @mouseleave="author.isHovered = false"
                                                   @click="handleAuthor(author.author_id)">
                                                    {{ author.author_name }}
                                                </u>
                                                <span v-if="index < item.authors.length - 1">; </span>
                                            </template>
                                        </p>
                                        <a-typography-paragraph
                                                :ellipsis="ellipsis ? { rows: 3, expandable: true, symbol: '展开∨' } : false"
                                                :content="item.paper_abstract"
                                        />
                                        <p style="color: #6C6C6C; line-height: 2">
                                            所属学科:
                                            <template v-for=" (cat, index) in item.categories">
                                                    <span style="color: #0B0E47">{{ cat }}
                                                    </span>
                                                <span v-if="index < item.categories.length - 1">; </span>
                                            </template>
                                            <br/>
                                            <span v-if="item.journal_ref">
                                                    发表期刊: <span style="color: #0B0E47">{{ item.journal_ref }}</span>
                                                    <br/>
                                                </span>
                                            更新时间:
                                            <span style="color: #0B0E47">{{item.update_date}}</span>
                                        </p>
                                        <a-button v-if="item.favorite" :size="large" style="background-color: #EFEFEF" @click="handleFavorite(item.paper_id)">
                                            <template #icon>
                                                <star-filled :style="{color: '#FCCA00'}"/>
                                            </template>
                                            取消收藏
                                        </a-button>
                                        <a-button v-else :size="large" style="background-color: #EFEFEF" @click="handleFavorite(item.paper_id)">
                                            <template #icon>
                                                <StarOutlined />
                                            </template>
                                            加入收藏
                                        </a-button>
                                        <a-button :size="large" style="margin-left: 10px; background-color: #EFEFEF" @click="handlePDF(item.url)">
                                            <template #icon>
                                                <ReadOutlined />
                                            </template>
                                            在线阅读
                                        </a-button>
                                        <a-button :size="large" style="margin-left: 10px; background-color: #EFEFEF" @click="$router.push('/similar_paper?paper_id=' + item.paper_id)">
                                            <template #icon>
                                                <PaperClipOutlined />
                                            </template>
                                            查看相似论文
                                        </a-button>
                                    </a-card>
                                </a-list-item>
                            </template>
                        </a-list>
                    </div>
                    <div v-else style="margin-top: 10px; width: 1000px">
                        <a-table :columns="columns" :data-source="data" bordered :loading="loading" :pagination="false">
                            <template #bodyCell="{ column, text, record }">
                                <template v-if="column.dataIndex === 'title'">
                                    <span :style="{ color: record.isTitleHovered ? '#5C7DFF' : '#1151D9', textDecoration: record.isTitleHovered ? 'underline' : 'none' , fontSize: '16px', cursor: 'pointer'}"
                                          @mouseover="record.isTitleHovered = true"
                                          @mouseleave="record.isTitleHovered = false"
                                          @click="handleRead(record.paper_id)">
                                        {{ text }}
                                    </span>
                                </template>
                                <template v-else-if="column.dataIndex === 'author'">
                                    <template v-for=" (author, index) in record.authors"
                                              :key="author.author_id">
                                        <u :style="{ color: author.isHovered ? '#6C6C6C' : '#0B0E47', textDecoration: author.isHovered ? 'underline' : 'none', fontSize: '14px', cursor: 'pointer' }"
                                           @mouseover="author.isHovered = true"
                                           @mouseleave="author.isHovered = false"
                                           @click="handleAuthor(author.author_id)">
                                            {{ author.author_name }}
                                        </u>
                                        <span v-if="index < record.authors.length - 1">; </span>
                                    </template>
                                </template>
                                <template v-else-if="column.dataIndex === 'operations'">
                                    <span style="display: flex; justify-content: center; align-items: center;">
                                        <a-tooltip v-if="record.favorite" title="取消收藏">
                                            <star-filled style="color: #FCCA00; fontSize :20px" @click="handleFavorite(record.paper_id)"/>
                                        </a-tooltip>
                                        <a-tooltip v-else title="加入收藏">
                                            <StarOutlined style="fontSize :20px" @click="handleFavorite(record.paper_id)"/>
                                        </a-tooltip>
                                        <a-tooltip title="在线阅读">
                                            <ReadOutlined style="fontSize :20px; margin-left: 5px" @click="handlePDF(record.url)"/>
                                        </a-tooltip>
                                        <a-tooltip title="查看相似论文">
                                            <PaperClipOutlined style="fontSize :20px; margin-left: 5px" @click="$router.push('/similar_paper?paper_id=' + record.paper_id)"/>
                                        </a-tooltip>
                                    </span>
                                </template>
                                <template v-else>
                                    <span style="color: #0B0E47; font-size: 14px">{{ text }}</span>
                                </template>
                            </template>
                        </a-table>
                    </div>
                    <div style="display: flex; justify-content: center; align-items: center; width: 1000px; margin-bottom: 20px; margin-top: 20px">
                        <a-pagination v-model:current="currentPage" show-quick-jumper :showSizeChanger="false" :total="total" @change="onPageChange" />
                    </div>
                </div>
                <a-modal v-model:visible="loginShow" :footer="null" centered width="800px">
                    <div style="display: flex;">
                        <img src="@/assets/cut-theone-scholar-logo.png" style="width: 400px;">
                        <div>
                            <div style="color: #0B0E47; font-weight: 500; font-size: 30px">欢迎登录</div>
                            <a-form
                                    :model="formState"
                                    name="normal_login"
                                    class="login-form"
                                    style="margin-top: 20px"
                                    @finish="onFinish"
                            >
                                <a-form-item
                                        label="账号"
                                        name="username"
                                        :rules="[{ required: true, message: '请输入账号' }]"
                                >
                                    <a-input v-model:value="formState.username">
                                        <template #prefix>
                                            <UserOutlined class="site-form-item-icon" />
                                        </template>
                                    </a-input>
                                </a-form-item>

                                <a-form-item
                                        label="密码"
                                        name="password"
                                        :rules="[{ required: true, message: '请输入密码' }]"
                                >
                                    <a-input-password v-model:value="formState.password">
                                        <template #prefix>
                                            <LockOutlined class="site-form-item-icon" />
                                        </template>
                                    </a-input-password>
                                </a-form-item>

                                <a-form-item style="margin-top: -10px">
                                    <a-form-item name="remember" no-style>
                                        <a-checkbox v-model:checked="formState.remember">自动登录</a-checkbox>
                                    </a-form-item>
                                </a-form-item>

                                <a-form-item style="margin-top: -10px">
                                    <a-button :disabled="disabled" type="primary" html-type="submit" class="login-form-button" style="width: 100%">
                                        登录
                                    </a-button>
                                    <div style="display: flex; justify-content: space-between; align-items: center; margin-top: 10px">
                                        <a href="">注册新用户</a>
                                        <a class="login-form-forgot" href="">忘记密码</a>
                                    </div>
                                </a-form-item>
                            </a-form>
                        </div>
                    </div>
                </a-modal>
            </a-layout-content>
            <a-layout-footer style="background: #000; text-align: center">
                <p style="color:#fff">©{{ new Date().getFullYear() }} {{ systemTitle }}</p>
                <p style="color:#fff">
                    <a @click.prevent="$router.push('/about')">关于</a>&nbsp;|&nbsp;
                    <a>开发团队</a>&nbsp;|&nbsp;
                    <a href="https://gitee.com/shenyang-theone/theone-recsys">了解更多</a>
                </p>
            </a-layout-footer>
        </a-layout>
    </a-layout>
</template>

<script>
import {defineComponent, reactive, toRefs, ref, onMounted} from "vue";
import dayjs from "dayjs";
import {
    AppstoreOutlined,
    DownOutlined,
    MenuOutlined, PaperClipOutlined, ReadOutlined,
    SearchOutlined, StarFilled, StarOutlined,
    UnorderedListOutlined, UserOutlined
} from "@ant-design/icons-vue";
import globalVariable from "@/components/mathJax/globalVariable";
import {search} from "@/api/post/search";
import {favorite} from "@/api/post/favorite";
import {login} from "@/api/post/login";
import {user_info} from "@/api/post/user_info";
import {notification} from "ant-design-vue";
import {logout as logout_request} from "@/api/post/logout";
import {useStore} from "vuex";
import {browsing} from "@/api/post/browsing";

export default defineComponent({
    components:{
        UserOutlined,
        StarOutlined,
        StarFilled,
        ReadOutlined,
        PaperClipOutlined,
        MenuOutlined,
        AppstoreOutlined,
        UnorderedListOutlined,
        DownOutlined,
        SearchOutlined,
    },
    setup(){

        // -------------onMounted钩子，组件挂载完毕异步加载数据--------------
        onMounted(() => {
            state.login = !store.state.logout;
            // 调用搜索接口
            search(state.searchQuery1, state.searchField1, state.pageSize, state.currentPage, state.sort, state.tagsChecked, state.startDate, state.endDate).then((response) => {
                if (response.data.status.code === 0) {
                    // 请求成功
                    state.data = response.data.data.paperList;
                    state.total = response.data.data.total;
                    // 处理数据
                    let data2 = state.data.slice();
                    for (let i = 0; i < data2.length; i++) {
                        let author2String = "";
                        for (let j = 0; j < data2[i].authors.length; j++) {
                            author2String += data2[i].authors[j].author_name + "; ";
                            data2[i].author = author2String;
                        }
                    }
                    state.data = data2;
                    state.loading = false;
                }
            })
            checkLaTex()

            // 处理数据：用于设置悬停样式
            state.data.forEach((paper) => {
                // 区分Title，为每个paper设置单独的isTitleHovered属性
                paper.isTitleHovered = false;
                paper.authors.forEach((author) => {
                    // 区分author，为每个author设置单独的isHovered属性
                    author.isHovered = false;
                });
            });
        });

        // ----------------定义的function，由下至上编写---------------
        const onAdvancedSearch = () => {
            state.loading = true;
            // 学科限定处理
            let subjects = [];
            for (let i = 0; i < state.subjects.length; i++) {
                // 每个级联选择是以一个数组呈现的
                // 获取第i个级联选择
                let curChoose = state.subjects[i].slice()
                // 获取该选择的最后一级学科
                let tempSubject = curChoose[curChoose.length-1]
                // 若选择的是一级学科physics进行特殊处理：替换为physics下的所有二级学科
                if(tempSubject==="PHYSICS"){
                    // subjects.push('astro-ph');
                    subjects.splice(i, 1, ...(['astro-ph', 'cond-mat', 'gr-qc', 'hep-ex', 'hep-lat', 'hep-ph', 'hep-th', 'math-ph', 'nlin', 'nucl-ex', 'nucl-th', 'physics', 'quant-ph']));
                }else {
                    subjects.push(tempSubject);
                }
            }
            state.tagsChecked = subjects;

            if(state.time.length !== 0){
                state.startDate = state.time[0].toISOString().substring(0, 10);
                state.endDate = state.time[1].toISOString().substring(0, 10);
            }

            // 调用搜索接口
            search(state.searchQuery1, state.searchField1, state.pageSize, state.currentPage, state.sort, state.tagsChecked, state.startDate, state.endDate).then((response) => {
                if (response.data.status.code === 0) {
                    // 请求成功
                    state.data = response.data.data.paperList;
                    state.total = response.data.data.total;
                    // 处理数据：用于list显示
                    // 注意在回调函数中处理
                    if(state.paperShow==="list") {
                        let data2 = state.data.slice();
                        for (let i = 0; i < data2.length; i++) {
                            let author2String = "";
                            for (let j = 0; j < data2[i].authors.length; j++) {
                                author2String += data2[i].authors[j].author_name + "; ";
                                // 添加author字段，用于在list状态下显示
                                data2[i].author = author2String;
                            }
                        }
                        state.data = data2;
                    }
                    state.loading = false;
                }
            })

            // 处理数据：用于设置悬停样式
            state.data.forEach((paper) => {
                // 区分Title，为每个paper设置单独的isTitleHovered属性
                paper.isTitleHovered = false;
                paper.authors.forEach((author) => {
                    // 区分author，为每个author设置单独的isHovered属性
                    author.isHovered = false;
                });
            });
        }

        const logout = () => {
            state.login = false;
            logout_request()
                    .then((response) => {
                        if (response.data) {
                            //退出成功
                            store.commit('SET_LOGOUT', true)
                            store.commit('CLEAR_USER_INFO')
                            store.commit('CLEAR_TOKEN')
                            // 清空本地存储的数据
                            sessionStorage.clear()
                            // 其他操作...
                        }
                    })
                    .catch(() => {
                        store.commit('SET_LOGOUT', true)
                        store.commit('CLEAR_USER_INFO')
                        store.commit('CLEAR_TOKEN')
                    })
        }

        const onFinish = values => {
            login(values.username, values.password, values.remember).then((response) => {
                store.commit('CLEAR_USER_INFO')
                store.commit('CLEAR_TOKEN')
                if (response.data.status.code === 0) {
                    state.loginShow = false;
                    state.login = true;

                    store.commit('SET_LOGOUT', false)
                    //成功后继续请求用户信息
                    store.commit('SET_TOKEN', response.data.data)
                    console.log(response.data.data)
                    user_info()
                            .then((response) => {
                                if (response.data.status.code === 0) {
                                    // 成功后设置用户信息
                                    store.commit('SET_USER_INFO', response.data.data.user)
                                    console.log(response.data.data.user)
                                } else {
                                    notification['error']({
                                        message: '错误',
                                        description: response.data.status.message,
                                    })
                                }
                            })
                            .catch()
                } else if (response.data.status.code === 1 || response.data.status.code === 2) {
                    notification['warning']({
                        message: '登录失败',
                        description: '您提供的用户名或密码无效',
                    })
                } else {
                    notification['error']({
                        message: '错误',
                        description: response.data.status.message,
                    })
                }
            })

        };

        const onMenuClick = ({ key }) => {
            switch (key) {
                case 'center': {
                    window.open('/user_center_demo', '_blank')
                    break
                }
                case 'favorite': {
                    window.open('/user_center_demo?currentKey=3&&selectedKeys=3&&openKeys=2', '_blank')
                    break
                }
                case 'interest': {
                    window.open('/user_center_demo?currentKey=4&&selectedKeys=4&&openKeys=2', '_blank')
                    break
                }
                case 'logout': {
                    logout()
                }
            }
        }

        const onLoginShow = () => {
            state.loginShow = true;
        };

        const handleFavorite = (paper_id) => {
            favorite(paper_id).then(() => {
                // 请求成功后，前端处理数据
                state.data.forEach((paper) => {
                    if (paper.paper_id === paper_id) {
                        paper.favorite = !paper.favorite;
                    }
                });
            });
        }

        const handleAuthor = (author_id) => {
            window.open('/author_show_demo?author_id=' + author_id, '_blank')
        }

        const handlePDF = (url) => {
            // 使用split方法按照'/'分割字符串，取得最后一个元素
            const parts = url.split("/");
            // 取得最后一个元素，即'0707.3421'
            const paper_id = parts[parts.length - 1];
            window.open('https://arxiv.org/pdf/' + paper_id + '.pdf', '_blank')
        }

        const handleRead = (paper_id) => {
            // 记录用户浏览论文历史
            browsing(paper_id).then((response) => {
                if(response.data.status.code === 0){
                    console.log("浏览埋点设置成功")
                }
            })
            window.open('/paper_show_demo?paper_id=' + paper_id, '_blank')
        }

        const onPaperShow = () => {
            state.paperShow = (state.paperShow==="card"?"list":"card");
            if(state.paperShow==="list"){
                // 处理数据
                let data2 = state.data.slice();
                for (let i = 0; i < data2.length; i++) {
                    let author2String = "";
                    for (let j = 0; j < data2[i].authors.length; j++) {
                        author2String += data2[i].authors[j].author_name + "; ";
                        // 添加author字段，用于在list状态下显示
                        data2[i].author = author2String;
                    }
                }
                state.data = data2;
            }
        };

        const onShowSizeChange = (current, pageSize) => {
            state.loading = true;
            // 调用搜索接口
            search(state.searchQuery1, state.searchField1, pageSize, current, state.sort, state.tagsChecked, state.startDate, state.endDate).then((response) => {
                if (response.data.status.code === 0) {
                    // 请求成功
                    state.pageSize = pageSize;
                    state.currentPage = current;
                    state.data = response.data.data.paperList;
                    state.total = response.data.data.total;
                    if(state.paperShow==="list"){
                        // 处理数据
                        let data2 = state.data.slice();
                        for (let i = 0; i < data2.length; i++) {
                            let author2String = "";
                            for (let j = 0; j < data2[i].authors.length; j++) {
                                author2String += data2[i].authors[j].author_name + "; ";
                                data2[i].author = author2String;
                            }
                        }
                        state.data = data2;
                    }
                    state.loading = false;
                }
            })
        }

        const onPageChange = pageNumber => {
            state.loading = true;
            // 调用搜索接口
            search(state.searchQuery1, state.searchField1, state.pageSize, pageNumber, state.sort, state.tagsChecked, state.startDate, state.endDate).then((response) => {
                if (response.data.status.code === 0) {
                    // 请求成功
                    state.currentPage = pageNumber;
                    state.data = response.data.data.paperList;
                    state.total = response.data.data.total;
                    if(state.paperShow==="list"){
                        // 处理数据
                        let data2 = state.data.slice();
                        for (let i = 0; i < data2.length; i++) {
                            let author2String = "";
                            for (let j = 0; j < data2[i].authors.length; j++) {
                                author2String += data2[i].authors[j].author_name + "; ";
                                data2[i].author = author2String;
                            }
                        }
                        state.data = data2;
                    }
                    window.scroll({
                        top: 0,
                        behavior: 'smooth' // 使用平滑滚动
                    });
                    state.loading = false;
                }
            })
        }

        const checkLaTex = () => {
            globalVariable.initMathjaxConfig();
            globalVariable.MathQueue();
        }

        const onClear = () => {
            state.searchQuery1 = "";
            state.searchQuery2 = "";
            state.searchQuery3 = "";
            state.searchQuery4 = "";
        }

        // --------------------定义的vue变量------------------------
        const store = useStore()

        // --------------------定义的响应数据-----------------------
        const state = reactive({
            loginShow: false,
            ellipsis: true,
            paperShow: "card",
            subjects: [],
            time: [],
            login: true,
            loading: true,
            total: 0,
            startDate: '',
            endDate: '',
            tagsChecked: [],
            sort:"time",
            currentPage: 1,
            pageSize: 10,
            rows: '20',
            data: [],
            searchOperator4: "and",
            searchOperator3: "and",
            searchOperator2: "and",
            searchField4: "journal",
            searchField3: "abstract",
            searchField2: "author",
            searchField1: "title",
            searchQuery4: "",
            searchQuery3: "",
            searchQuery2: "",
            searchQuery1: "",
            backGroundImg: require('@/assets/background2.png')
        })

        const formState = reactive({
            username: '',
            password: '',
            remember: false,
        });

        // ----------------------定义的常量--------------------
        const ranges = {
            Today: [dayjs(), dayjs()],
            'This Month': [dayjs(), dayjs().endOf('month')],
        }

        const columns = [{
            title: '题名',
            dataIndex: 'title',
            width: 480,
        }, {
            title: '作者',
            dataIndex: 'author',
            width: 200,
        }, {
            title: '发表期刊',
            dataIndex: 'journal_ref',
            width: 200,
        }, {
            title:'更新时间',
            dataIndex: 'update_date',
            width: 120,
        }, {
            title: '操作',
            dataIndex: 'operations',
            width: 100,
        }];

        const rowOptions = ref([{
            value: '20',
            label: '20',
        }, {
            value: '50',
            label: '50',
        }, {
            value: '100',
            label: '100',
        }]);

        // value: 'PHYSICS' 表示一级学科Physics
        // value: 'physics' 表示Physics下的二级学科PHYSICS
        const subjectOptions = [{
            label: 'Computer Science',
            value: 'cs',
            children: [{label: 'cs.AI', value: 'cs.AI'}, {label: 'cs.AR', value: 'cs.AR'}, {label: 'cs.CC', value: 'cs.CC'}, {label: 'cs.CE', value: 'cs.CE'},
                {label: 'cs.CG', value: 'cs.CG'}, {label: 'cs.CL', value: 'cs.CL'}, {label: 'cs.CR', value: 'cs.CR'}, {label: 'cs.CV', value: 'cs.CV'},
                {label: 'cs.CY', value: 'cs.CY'}, {label: 'cs.DB', value: 'cs.DB'}, {label: 'cs.DC', value: 'cs.DC'}, {label: 'cs.DL', value: 'cs.DL'},
                {label: 'cs.DM', value: 'cs.DM'}, {label: 'cs.DS', value: 'cs.DS'}, {label: 'cs.ET', value: 'cs.ET'}, {label: 'cs.FL', value: 'cs.FL'},
                {label: 'cs.GL', value: 'cs.GL'}, {label: 'cs.GR', value: 'cs.GR'}, {label: 'cs.GT', value: 'cs.GT'}, {label: 'cs.HC', value: 'cs.HC'},
                {label: 'cs.IR', value: 'cs.IR'}, {label: 'cs.IT', value: 'cs.IT'}, {label: 'cs.LG', value: 'cs.LG'}, {label: 'cs.LO', value: 'cs.LO'},
                {label: 'cs.MA', value: 'cs.MA'}, {label: 'cs.MM', value: 'cs.MM'}, {label: 'cs.MS', value: 'cs.MS'}, {label: 'cs.NA', value: 'cs.NA'},
                {label: 'cs.NE', value: 'cs.NE'}, {label: 'cs.NI', value: 'cs.NI'}, {label: 'cs.OH', value: 'cs.OH'}, {label: 'cs.OS', value: 'cs.OS'},
                {label: 'cs.PF', value: 'cs.PF'}, {label: 'cs.PL', value: 'cs.PL'}, {label: 'cs.RO', value: 'cs.RO'}, {label: 'cs.SC', value: 'cs.SC'},
                {label: 'cs.SD', value: 'cs.SD'}, {label: 'cs.SE', value: 'cs.SE'}, {label: 'cs.SI', value: 'cs.SI'}, {label: 'cs.SY', value: 'cs.SY'}],
        }, {
            label: 'Economics',
            value: 'econ',
            children: [{
                label: 'econ.EM',
                value: 'econ.EM',
            }, {
                label: 'econ.GN',
                value: 'econ.GN',
            }, {
                label: 'econ.TH',
                value: 'econ.TH',
            }],
        }, {
            label: 'Electrical Engineering and Systems Science',
            value: 'eess',
            children: [{
                label: 'eess.AS',
                value: 'eess.AS',
            }, {
                label: 'eess.IV',
                value: 'eess.IV',
            }, {
                label: 'eess.SP',
                value: 'eess.SP',
            }, {
                label: 'eess.SY',
                value: 'eess.SY',
            }],
        }, {
            label: 'Mathematics',
            value: 'math',
            children: [{label: 'math.AC', value: 'math.AC'}, {label: 'math.AG', value: 'math.AG'}, {label: 'math.AP', value: 'math.AP'}, {label: 'math.AT', value: 'math.AT'},
                {label: 'math.CA', value: 'math.CA'}, {label: 'math.CO', value: 'math.CO'}, {label: 'math.CT', value: 'math.CT'}, {label: 'math.CV', value: 'math.CV'},
                {label: 'math.DG', value: 'math.DG'}, {label: 'math.DS', value: 'math.DS'}, {label: 'math.FA', value: 'math.FA'}, {label: 'math.GM', value: 'math.GM'},
                {label: 'math.GN', value: 'math.GN'}, {label: 'math.GR', value: 'math.GR'}, {label: 'math.GT', value: 'math.GT'}, {label: 'math.HO', value: 'math.HO'},
                {label: 'math.IT', value: 'math.IT'}, {label: 'math.KT', value: 'math.KT'}, {label: 'math.LO', value: 'math.LO'}, {label: 'math.MG', value: 'math.MG'},
                {label: 'math.MP', value: 'math.MP'}, {label: 'math.NA', value: 'math.NA'}, {label: 'math.NT', value: 'math.NT'}, {label: 'math.OA', value: 'math.OA'},
                {label: 'math.OC', value: 'math.OC'}, {label: 'math.PR', value: 'math.PR'}, {label: 'math.QA', value: 'math.QA'}, {label: 'math.RA', value: 'math.RA'},
                {label: 'math.RT', value: 'math.RT'}, {label: 'math.SG', value: 'math.SG'}, {label: 'math.SP', value: 'math.SP'}, {label: 'math.ST', value: 'math.ST'},],
        }, {
            label: 'Physics',
            value: 'PHYSICS',
            children: [{
                label: 'ASTROPHYSICS',
                value: 'astro-ph',
                children: [{label: 'astro-ph.CO', value: 'astro-ph.CO',}, {label: 'astro-ph.EP', value: 'astro-ph.EP',}, {label: 'astro-ph.GA', value: 'astro-ph.GA',},
                    {label: 'astro-ph.HE', value: 'astro-ph.HE',}, {label: 'astro-ph.IM', value: 'astro-ph.IM',}, {label: 'astro-ph.SR', value: 'astro-ph.SR',}],
            }, {
                label: 'CONDENSED MATTER',
                value: 'cond-mat',
                children: [{label: 'cond-mat.dis-nn', value: 'cond-mat.dis-nn',}, {label: 'cond-mat.mes-hall', value: 'cond-mat.mes-hall',}, {label: 'cond-mat.mtrl-sci', value: 'cond-mat.mtrl-sci',},
                    {label: 'cond-mat.other', value: 'cond-mat.other',}, {label: 'cond-mat.quant-gas', value: 'cond-mat.quant-gas',}, {label: 'cond-mat.soft', value: 'cond-mat.soft',},
                    {label: 'cond-mat.stat-mech', value: 'cond-mat.stat-mech',}, {label: 'cond-mat.str-el', value: 'cond-mat.str-el',}, {label: 'cond-mat.supr-con', value: 'cond-mat.supr-con',}],
            }, {
                label: 'GENERAL RELATIVITY AND QUANTUM COSMOLOGY',
                value: 'gr-qc',
            }, {
                label: 'HIGH ENERGY PHYSICS - EXPERIMENT',
                value: 'hep-ex',
            }, {
                label: 'HIGH ENERGY PHYSICS - LATTICE',
                value: 'hep-lat',
            }, {
                label: 'HIGH ENERGY PHYSICS - PHENOMENOLOGY',
                value: 'hep-ph',
            }, {
                label: 'HIGH ENERGY PHYSICS - THEORY',
                value: 'hep-th',
            }, {
                label: 'MATHEMATICAL PHYSICS',
                value: 'math-ph',
            }, {
                label: 'NONLINEAR SCIENCES',
                value: 'nlin',
                children: [{label: 'nlin.AO', value: 'nlin.AO',}, {label: 'nlin.CD', value: 'nlin.CD',}, {label: 'nlin.CG', value: 'nlin.CG',},
                    {label: 'nlin.PS', value: 'nlin.PS',}, {label: 'nlin.SI', value: 'nlin.SI',}],
            }, {
                label: 'NUCLEAR EXPERIMENT',
                value: 'nucl-ex',
            }, {
                label: 'NUCLEAR THEORY',
                value: 'nucl-th',
            }, {
                label: 'PHYSICS',
                value: 'physics',
                children: [{label: 'physics.acc-ph', value: 'physics.acc-ph',}, {label: 'physics.ao-ph', value: 'physics.ao-ph',}, {label: 'physics.app-ph', value: 'physics.app-ph',},
                    {label: 'physics.atm-clus', value: 'physics.atm-clus',}, {label: 'physics.atom-ph', value: 'physics.atom-ph',}, {label: 'physics.bio-ph', value: 'physics.bio-ph',},
                    {label: 'physics.chem-ph', value: 'physics.chem-ph',}, {label: 'physics.class-ph', value: 'physics.class-ph',}, {label: 'physics.comp-ph', value: 'physics.comp-ph',},
                    {label: 'physics.data-an', value: 'physics.data-an',}, {label: 'physics.ed-ph', value: 'physics.ed-ph',}, {label: 'physics.flu-dyn', value: 'physics.flu-dyn',},
                    {label: 'physics.gen-ph', value: 'physics.gen-ph',}, {label: 'physics.geo-ph', value: 'physics.geo-ph',}, {label: 'physics.hist-ph', value: 'physics.hist-ph',},
                    {label: 'physics.ins-det', value: 'physics.ins-det',}, {label: 'physics.med-ph', value: 'physics.med-ph',}, {label: 'physics.optics', value: 'physics.optics',},
                    {label: 'physics.plasm-ph', value: 'physics.plasm-ph',}, {label: 'physics.pop-ph', value: 'physics.pop-ph',}, {label: 'physics.soc-ph', value: 'physics.soc-ph',},
                    {label: 'physics.space-ph', value: 'physics.space-ph',},],
            }, {
                label: 'QUANTUM PHYSICS',
                value: 'quant-ph',
            }],
        }, {
            label: 'Quantitative Biology',
            value: 'q-bio',
            children: [{label: 'q-bio.BM', value: 'q-bio.BM',}, {label: 'q-bio.CB', value: 'q-bio.CB',}, {label: 'q-bio.GN', value: 'q-bio.GN',},
                {label: 'q-bio.MN', value: 'q-bio.MN',}, {label: 'q-bio.NC', value: 'q-bio.NC',}, {label: 'q-bio.OT', value: 'q-bio.OT',},
                {label: 'q-bio.PE', value: 'q-bio.PE',}, {label: 'q-bio.QM', value: 'q-bio.QM',}, {label: 'q-bio.SC', value: 'q-bio.SC',},
                {label: 'q-bio.TO', value: 'q-bio.TO',}],
        }, {
            label: 'Quantitative Finance',
            value: 'q-fin',
            children: [{label: 'q-fin.CP', value: 'q-fin.CP',}, {label: 'q-fin.EC', value: 'q-fin.EC',}, {label: 'q-fin.GN', value: 'q-fin.GN',},
                {label: 'q-fin.MF', value: 'q-fin.MF',}, {label: 'q-fin.PM', value: 'q-fin.PM',}, {label: 'q-fin.PR', value: 'q-fin.PR',},
                {label: 'q-fin.RM', value: 'q-fin.RM',}, {label: 'q-fin.ST', value: 'q-fin.ST',}, {label: 'q-fin.TR', value: 'q-fin.TR',},],
        }, {
            label: 'Statistics',
            value: 'stat',
            children: [{label: 'stat.AP', value: 'stat.AP',}, {label: 'stat.CO', value: 'stat.CO',}, {label: 'stat.ME', value: 'stat.ME',},
                {label: 'stat.ML', value: 'stat.ML',}, {label: 'stat.OT', value: 'stat.OT',}, {label: 'stat.TH', value: 'stat.TH',},],
        }];

        // ----------------------return函数-------------------
        return{
            onFinish,
            formState,
            onMenuClick,
            onLoginShow,
            handleFavorite,
            handleAuthor,
            handlePDF,
            handleRead,
            onPaperShow,
            onShowSizeChange,
            onPageChange,
            onClear,
            onAdvancedSearch,
            columns,
            rowOptions,
            subjectOptions,
            ranges,
            ...toRefs(state),
        }
    }
})
</script>

<style scoped>

.active {
    background-color: #4F4F4F;
    color: white;
}
.inactive {
    background-color: white;
    color: #4F4F4F;
}

/*高级检索说明*/
#tab-description{
    overflow: hidden;
    width: 325px;
    height: 310px;
    background-color: white;
    border-radius: 4px 4px 4px 4px;
}

/*高级检索框主体*/
#tab-content{
    width: 650px;
    height: 310px;
    background-color: white;
    border-radius: 0 4px 4px 4px;
}

/*高级检索框头部的文本*/
#tab-header-text{
    text-align: center; /* 文本水平居中 */
    line-height: 50px; /* 设置和div高度相同的值，使文本垂直居中 */;
    display: flex; /* 垂直居中时可以使用flexbox */
    justify-content: center; /* 文本垂直居中 */
    align-items: center; /* 文本垂直居中 */
    font-size: 20px; /* 设置字体大小 */
}

/*高级检索框头部*/
#tab-header{
    margin-left: 300px;
    width: 150px;
    height: 50px;
    background-color: #1890ff;
    color: white;
    border-radius: 4px 4px 0 0;
}

/*分割线*/
.custom-divider {
    border: none;
    height: 1px;
    background-color: #BBBBBB;
}
</style>